<template>
  <div>
    <el-form ref="infoForm" :model="infoForm" label-width="160px" label-position="right">
      <div class="setting-box">
        <p class="setting-box-title"><span></span>校历基础设置</p>
        <div class="setting-box-body">
          <el-row>
            <el-col :span="12">
              <el-form-item label="开学日期:" prop="time">
                <el-date-picker type="date"
                                placeholder="选择日期"
                                v-model="infoForm.time"
                                value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="放假日期:" prop="end_time">
                <el-date-picker type="date"
                                placeholder="选择日期"
                                v-model="infoForm.end_time"
                                value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学期:">
                <el-select v-model="infoForm.type" placeholder="选择学期">
                  <el-option :label="item.name" :value="item.id" v-for="(item, index) in semesterList"
                             :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学年:">
                <el-select placeholder="学年" v-model="infoForm.year" size="small"
                           class="w-140 mr-10">
                  <el-option :label="item.name" :value="item.name" v-for="(item, index) in yearList"
                             :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上次操作时间:">
                {{ update_time }}
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="setting-box">
        <div class="setting-box-body">
          <el-button type="primary" @click="onSubmit" size="small">保存</el-button>
        </div>
      </div>
    </el-form>
    <div class="height40"></div>
  </div>
</template>

<script>
import {yearList} from '@/utils/util.js'

export default {
  components: {},
  data () {
    return {
      infoForm: {
        type: '',
        time: '',
        year: '',
        end_time: ''
      },
      update_time: '--',
      semesterList: [
        {
          id: 0,
          name: '上学期'
        },
        {
          id: 1,
          name: '下学期'
        }
      ],
      yearList: yearList
    }
  },
  created () {
    this.InitFn()
  },
  methods: {
    InitFn () {
      this.$fetch(this.api.setting.semester, {}).then(res => {
        if (res.code === 0) {
          this.infoForm.type = res.vo.type
          this.infoForm.time = res.vo.time
          this.infoForm.end_time = res.vo.end_time
          this.infoForm.year = res.vo.year
          this.update_time = res.vo.update_time
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    onSubmit () {
      // 提交 this.$refs.infoForm.validate，这是表单验证
      console.log('数据提交', this.infoForm)
      if (!this.infoForm.time) {
        this.$message.error('选择开始时间')
        return
      }
      if (!this.infoForm.year) {
        this.$message.error('填写相应学年')
        return
      }

      this.$post(this.api.setting.semester, this.infoForm).then(res => {
        if (res.code === 0) {
          this.$message({
            message: '设置成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>
